<template>
	<view class="work-type-choose-list-page page">
		<image :src="`${cloudStorage}index/top-bg.png`" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="true" color="#000" :topBgColor="topBgColor" title="技能标签"></CustomNav>
		<view class="list-content block" :style="'margin-top:'+mt">
			<view class="parent-block" :style="type==1?'height:calc(100vh - '+mt+' - 230rpx)':'height:calc(100vh - '+mt+' - 30rpx)'">
				<view class="parent-item" @click="parentIndex=index" :class="parentIndex==index?'selected':''" v-for="(item,index) in list" :key="item.id">{{item.name}}</view>
			</view>
			<view class="child-block" :style="type==1?'height:calc(100vh - '+mt+' - 230rpx)':'height:calc(100vh - '+mt+' - 30rpx)'">
				<view class="child-item" :class="selectedIds.includes(item.id)?'selected':''" @click="handleTap(item)" v-for="item in child" :key="item.id">
					<image v-if="item.icon" :src="item.icon" mode="aspectFill" class="child-icon"></image>
					<image v-else src="@/static/image/work_type.png" mode="aspectFill" class="child-icon"></image>
					<view class="child-name">{{item.name}}</view>
				</view>
			</view>
			<view class="clear"></view>
		</view>
		<view v-if="type==1" class="footer-block">
			<view class="total-block">
				<view class="total">已选({{selectedIds.length}}/{{max}})</view>
				<view class="total-show">
					<view class="box">
						<view class="total-item" v-for="item in selected" @click="handleTap(item)">{{item.name}} x
						</view>
					</view>
				</view>
			</view>
			<view class="footer-content">
				<view class="btn cancel" @click="back">取消</view>
				<view class="btn normal" @click="submit">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getWorkType} from '@/api/conf.js'
	import {multipleChoiceChangeObj} from '@/util/util.js'
	export default{
		data(){
			return{
				list:[],
				parentIndex:0,
				child:[],
				type:1,
				selected:{},
				max:5,
				ids:[],
				topBgColor: 'rgba(0,0,0,0)',
			}
		},
		computed:{
			selectedIds(){
				return Object.keys(this.selected).map(item=>this.selected[item].id)
			}
		},
		watch:{
			list(val){
				this.child=this.list[this.parentIndex].child
			},
			parentIndex(val){
				this.child=this.list[this.parentIndex].child
			}
		},
		methods:{
			initSelect(){
				if(this.ids.length>0){
					this.list.forEach(item=>{
						item.child.forEach(item2=>{
							if(this.ids.includes(item2.id.toString())){
								this.$set(this.selected,item2.id,item2)
							}
						})
					})
				}
			},
			handleTap(item){
				switch(this.type){
					case 1://1为选择 2为跳转
						multipleChoiceChangeObj('selected', item, this, this.max);
						break;
					case 2:
						this.navigate('/page_other/work/search?type='+item.id+'&name='+item.name)
						break;
				}
			},
			getList(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				getWorkType().then(res=>{
					this.list=res;
					this.initSelect();
				})
			},
			submit(){
				if(this.selectedIds.length==0){
					this.showToast('请至少选择一个');
					return
				}
				let data=Object.keys(this.selected).map(item=>this.selected[item])
				uni.$emit('workType',data)
				this.back();
			}
		},
		onLoad(e) {
			this.ids=e.ids?e.ids.split(','):[];
			this.type=e.type*1||1;
			this.max=e.max*1||5
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.work-type-choose-list-page {
		overflow: hidden;
	
		.top-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
		}
	
		.block {
			width: $content-width;
		}
		
		.list-content{
			margin: 0 auto;
			display: flex;
			.parent-block{
				box-shadow: 0 0 10px 0 #efefef;
				overflow-y: scroll;
				margin-right: 20rpx;
				background: #fff;
				border-radius: 14px;
				width: 200rpx;
				padding: 0 30rpx;
				.parent-item{
					margin: 30rpx 0;
					font-size: 30rpx;
					width: 100%;
				}
				.parent-item.selected{
					color: $orange-color;
				}
			}
			.child-block{
				box-shadow: 0 0 10px 0 #efefef;
				overflow-y: scroll;
				width: calc(100% - 220rpx);
				background: #fff;
				border-radius: 14px;
				padding: 30rpx;
				.child-item.selected{
					.child-name{
						color: $orange-color;
					}
				}
				.child-item{
					float: left;
					margin-bottom: 20rpx;
					height: 140rpx;
					width:50%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.child-icon{
						width: 70rpx;
						height: 70rpx;
					}
					.child-name{
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						text-align: center;
						width: 100%;
						font-size: 28rpx;
						margin-top: 12rpx;
					}
				}
			}
		}
		
		.footer-block {
			box-shadow: 0px -5px 20px 0 #efefef;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 200rpx;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			padding: 20rpx;
		
			.total-block {
				width: 100%;
				height: 60rpx;
				display: flex;
				align-items: center;
				flex-direction: row;
		
				.total {
					width: 160rpx;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
		
				.total-show {
					width: calc(100% - 160rpx);
					height: 100%;
					overflow-x: scroll;
					padding: 0 10rpx;
					display: flex;
					align-items: center;
		
					.box {
						display: flex;
						flex-direction: row;
						align-items: center;
					}
		
					.total-item {
						border: 1px solid #FF7626;
						color: #FF7626;
						font-size: 22rpx;
						margin-right: 20rpx;
						padding: 6rpx 20rpx;
						border-radius: 10rpx;
						white-space: nowrap;
					}
				}
			}
		
			.footer-content {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: left;
				height: 100rpx;
				padding: 15rpx 0;
				.btn{
					width: calc(50% - 20rpx);
				}
				.btn.cancel {
					margin-right: 40rpx;
				}
			}
		}
	}
</style>